rtl-css-js
Advanced tools
The rtl-css-js npm package is designed to convert CSS styles written for left-to-right (LTR) layouts into right-to-left (RTL) layouts. This is particularly useful for developers creating or maintaining websites and applications that need to support multiple languages, including those read from right to left, such as Arabic and Hebrew. The package provides a straightforward API to transform CSS objects, making it easier to manage styles in multilingual projects.
Convert LTR CSS to RTL
Converts a CSS object with left-based properties to right-based ones for RTL support. For example, 'paddingLeft: 10px' becomes 'paddingRight: 10px'.
{"paddingLeft": "10px"}Handle Flipping Values
Automatically flips certain CSS values to their opposite direction. For instance, 'textAlign: left' is converted to 'textAlign: right' for RTL layouts.
{"textAlign": "left"}Ignore Specific Properties
Allows specific CSS properties to be ignored during the conversion process by using a special comment directive. This is useful for properties that should not change direction.
{"/* rtl:ignore */ paddingLeft": "10px"}Similar to rtl-css-js, postcss-rtl is a PostCSS plugin that generates RTL stylesheets. The main difference is that postcss-rtl works at the CSS file level and is part of the PostCSS ecosystem, making it more suitable for projects already using PostCSS.
rtlcss is another npm package that focuses on converting LTR CSS to RTL. It provides more granular control over the conversion process compared to rtl-css-js, including the ability to define custom rules and directives within CSS files. rtlcss is often used directly in build processes or as part of a larger CSS processing pipeline.
RTL conversion for CSS in JS objects
![All Contributors][all-contributors-badge]
For some locales, it's necessary to change padding-left to padding-right
when your text direction is right to left. There are tools like this for CSS
(cssjanus for example) which
manipulate strings of CSS to do this, but none for CSS in JS where your CSS is
represented by an object.
This is a function which accepts a CSS in JS object and can convert
padding-left to padding-right as well as all other properties where it makes
sense to do that (at least, that's what it's going to be when it's done... This
is a work in progress).
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies:
npm install --save rtl-css-js
This module is exposed via CommonJS as
well as UMD with the global as rtlCSSJS
CommonJS:
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: 23})
console.log(styles) // logs {paddingRight: 23}
You can also just include a script tag in your browser and use the rtlCSSJS
variable:
<script src="https://unpkg.com/rtl-css-js"></script>
<script>
const styles = rtlCSSJS({paddingRight: 23})
console.log(styles) // logs {paddingLeft: 23}
</script>
You can also control which rules you don't want to flip by adding a
/* @noflip */ CSS comment to your rule
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: '20px /* @noflip */'})
console.log(styles) // logs {paddingLeft: '20px /* @noflip */' }
This library support kebab-case properties too.
const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({'padding-right': 23})
console.log(styles) // logs {'padding-left': 23}
rtl-css-js also exposes its internal helpers and utilities so you can deal
with certain scenarios
yourself. To use these you can use the rtlCSSJSCore global with the UMD build,
require('rtl-css-js/core'), or use
import {propertyValueConverters, arrayToObject} from 'rtl-css-js/core'.
You can import anything that's exported from src/core. Please see the code
comments for documentation on how to use these.
backgroundRight now background and backgroundImage just replace all instances of ltr
with rtl and right with left. This is so you can have a different image
for your LTR and RTL, and in order to flip linear gradients. Note that this is
case sensitive! Must be lower case. Note also that it will not change bright
to bleft. It's a little smarter than that. But this is definitely something
to consider with your URLs.
var()Since it's impossible to know what the contents of a css variable are until the styles are actually calculated by the browser, any CSS variable contents will not be converted.
CSSJanus was a major inspiration.
react-with-styles with
Aphroditertl-css-js's core.jss to support flipping styles
dynamically.I'm not aware of any, if you are please make a pull request and add it here!
Thanks goes to these people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT
FAQs
Right To Left conversion for CSS in JS objects
The npm package rtl-css-js receives a total of 1,198,974 weekly downloads. As such, rtl-css-js popularity was classified as popular.
We found that rtl-css-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
